<template>
  <div style="background-color: white; width: 100%">
    <div class="index-body">
      <div style="padding: 0 40px; overflow: hidden">
        <!-- <div class="detail-top-c">
        <span>您的当前位置：</span>
        <router-link class="link-nav" to="/product">产品中心</router-link>
        <span> > 产品详情</span>
      </div> -->
        <div style="display: flex; justify-content: end; margin-top: 30px">
          <div style="font-size: 14px; color: #666666">
            <span style="cursor: pointer" @click="$router.push('/index')">{{
              $store.state.locale == "zh-cn" ? "首页" : "Home"
            }}</span>
            >
            <span
              style="color: #333333; cursor: pointer"
              @click="$router.push('/goodsHot')"
              >{{ $store.state.locale == "zh-cn" ? "热销产品" : "Products" }}</span
            >
            >
            <span style="font-weight: bold; color: #333333">{{
              $store.state.locale == "zh-cn" ? "产品详情" : "Products Detail"
            }}</span>
          </div>
        </div>
      </div>

      <div class="detail-body">
        <div
          style="
            position: absolute;
            right: 40px;
            color: #c91d1d;
            font-size: 14px;
            cursor: pointer;
          "
          @click="back()"
        >
          <i class="el-icon-arrow-left"></i>

          返回
        </div>
        <div class="detail-info-top" style="justify-content: center">
          <!-- <div class="list-left list-left-detail">
          <div
            :class="classify_id == 0 ? 'list-left-all active' : 'list-left-all'"
            @click="changeClassify(0)"
          >
            全部
          </div>
          <div v-for="(item, key) in classify" :key="'classify' + key">
            <div
              :class="classify_id == item.id ? 'list-left-p active' : 'list-left-p'"
              @click="changeOpen(key)"
            >
              <div class="list-left-p-name">{{ item.name }}</div>
              <img
                src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/dw/p2.png"
                :class="
                  item.open ? 'list-left-icon list-left-icon-open' : 'list-left-icon'
                "
              />
            </div>
            <div
              :style="
                item.open ? 'height:' + item.children.length * 40 + 'px' : 'height:0'
              "
              class="list-left-c"
            >
              <div
                :class="
                  items.id == classify_id ? 'list-left-c-item active' : 'list-left-c-item'
                "
                v-for="(items, keys) in item.children"
                :key="'c' + keys"
                @click="changeClassify(items.id)"
              >
                {{ items.name }}
              </div>
            </div>
          </div>
        </div> -->
          <el-carousel
            ref="de-car"
            :interval="10000"
            arrow="never"
            class="detail-banners"
            indicator-position="“none”"
          >
            <el-carousel-item
              v-for="(item, key) in info.images"
              :key="'car' + key"
              class="detail-banners"
            >
              <el-image :src="item" fit="cover" class="detail-banners"></el-image>
            </el-carousel-item>
          </el-carousel>
          <div class="top-left">
            <div class="top-left-c">{{ info.category_one.name }}</div>
            <div class="top-left-name">{{ info.title }}</div>
            <div class="top-left-no top-left-no-nb">
              {{ $store.state.locale == "zh-cn" ? "产品款号" : "Style number" }}：{{
                info.goods_sn
              }}
            </div>
            <div class="top-left-no top-left-no-nb">
              {{ $store.state.locale == "zh-cn" ? "尺寸" : "Size" }}：{{ info.size }}
            </div>
            <div class="top-left-no">
              {{ $store.state.locale == "zh-cn" ? "材质" : "Material" }}：{{
                info.material
              }}
            </div>
            <div class="top-images">
              <div v-for="(item, key) in info.images" :key="key" class="top-images-item">
                <el-image
                  :src="item"
                  fit="cover"
                  class="top-images-item-image"
                  @click="changeBanner(key)"
                  @mouseenter="changeBanner(key)"
                ></el-image>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-line"></div>
        <div class="detial-titles">
          {{ $store.state.locale == "zh-cn" ? "产品细节" : "Details" }}
        </div>
        <img
          src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/g-d-1.png"
          class="detail-line-img"
        />
        <div style="margin-left: 200px">
          <div v-html="info.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      info: {
        images: [],
      },
      classify: [],
      classify_id: 0,
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.classify_id = this.$route.query.classify;
    this.getData();
    // this.getClassify();
  },
  computed: {
    language() {
      return this.$store.state.locale;
    },
  },
  methods: {
    back() {
      this.$router.back();
    },
    changeClassify(id) {
      this.$router.push({
        path: "/product?id=" + id,
      });
    },
    changeOpen(index) {
      this.classify[index].open = !this.classify[index].open;
      this.$forceUpdate();
    },
    getClassify() {
      this.ajaxs("Category/index", {
        success: (res) => {
          this.classify = res.data;
          for (var i in this.classify) {
            this.classify[i].open = false;
            if (i == 0) this.classify[i].open = true;
          }
        },
      });
    },
    changeBanner(index) {
      this.$refs["de-car"].setActiveItem(index);
    },
    getData() {
      this.ajaxs("goods/detail?translate=" + this.language, {
        data: {
          id: this.id,
        },
        success: (res) => {
          this.info = res.data;
        },
      });
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/product/index.css";
@import "../../assets/css/product/detail.css";
@import "../../assets/css/index/index.css";
</style>
